<template>
	<view class="uni-container">
		<uni-forms>
			<uni-row>
				<uni-col :span="15">
					<uni-forms-item label="服务单号">
						<!-- <text>{{orderSn}}</text> -->
						<uni-easyinput :styles="inputStyles" :inputBorder="showInputBorder" :disabled="true" v-model="orderSn"
							type="text"></uni-easyinput>
					</uni-forms-item>
				</uni-col>
				<uni-col :span="9">
					<uni-forms-item label="派单人">
						<uni-easyinput :styles="inputStyles" :disabled="true" v-model="username"></uni-easyinput>
					</uni-forms-item>
				</uni-col>
			</uni-row>
			<uni-forms-item label="服务类型">
				<uni-row>
					<uni-col :span="15">
						<uni-easyinput :styles="inputStyles" type="text" :inputBorder="showInputBorder" :disabled="true"
							v-model="serviceName" />
					</uni-col>
					<uni-col :span="9">
						<uni-easyinput :styles="inputStyles" type="text" :inputBorder="showInputBorder" :disabled="true"
							v-model="options.status_valuetotext[formData.status]" />
					</uni-col>
				</uni-row>
			</uni-forms-item>

			<uni-forms-item v-if="!isCommon" label="操作">
				<button v-if="formData.customer_location" type="primary" size="mini"
					@click="openNavigation(formData.customer_location.latitude,formData.customer_location.longitude)"
					icon="map" shape="circle">车辆位置</button>
				<button type="success" v-if="formData.customer_phone" size="mini"
					@click="makeCall(formData.customer_phone)" icon="phone" shape="circle">联系客户</button>
			</uni-forms-item>

			<uni-forms-item label="简述需求">
				<uni-easyinput :styles="inputStyles" :disabled="true" :inputBorder="showInputBorder"
					v-model="formData.customer_needs" type="textarea"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item v-if="formData.service_content" label="服务内容">
				<uni-easyinput :styles="inputStyles" :disabled="true" :inputBorder="showInputBorder"
					v-model="formData.service_content" type="textarea"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="联盟门店">
				<uni-row>
					<uni-col :span="15">
						<uni-easyinput :styles="inputStyles" type="text" :inputBorder="showInputBorder" :disabled="true"
							v-model="storeName" />
					</uni-col>
					<uni-col :span="9">
						<button v-if="formData.store_id[0]?.location" type="primary" size="mini" @click="openNavigation(formData.store_id[0].location.coordinates[0],
			                formData.store_id[0].location.coordinates[1])" icon="map" shape="circle">查看位置</button>
					</uni-col>
				</uni-row>
			</uni-forms-item>

			<uni-forms-item label="协议价">
				<uni-easyinput :styles="inputStyles" type="number" :inputBorder="showInputBorder" :disabled="true"
					v-model="formData.price"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item v-if="serviceFee" label="服务增项费">
				<uni-easyinput :styles="inputStyles" type="number" :inputBorder="showInputBorder" :disabled="true"
					v-model="formData.price"></uni-easyinput>
			</uni-forms-item>

			<uni-forms-item label="车管家">
				<uni-easyinput :styles="inputStyles" type="text" :inputBorder="showInputBorder" :disabled="true"
					v-model="butlerName" />
			</uni-forms-item>

			<uni-forms-item v-if="supervisorName" label="稽核">
				<uni-easyinput :styles="inputStyles" type="text" :inputBorder="showInputBorder" :disabled="true"
					v-model="supervisorName" />
			</uni-forms-item>
			<view class="forms-row">
				<text class="forms-col">服务照片</text>
			</view>
			<view v-for="(item, index) in formData.service_photos" :key="item.url" class="uni-flex uni-row forms-row">
				<view class="flex-item forms-col">
					<uni-file-picker v-model="formData.service_photos[index]" :image-styles="imageStyles"
						:disabled="true" :del-icon="false" :sizeType="['compressed']" :sourceType="['camera']" return-type="object"
						>拍照</uni-file-picker>
				</view>
				<uni-easyinput class="forms-textarea" :styles="inputStyles" v-model="formData.service_photos[index].desc" 
					:disabled="true" type="textarea" min-height="60" auto-height placeholder="未填写描述"></uni-easyinput>
			</view>
			<view class="uni-button-group">


			</view>
		</uni-forms>
	</view>

</template>

<script>
	// 由schema2code生成，包含校验规则和enum静态数据
	import {
		enumConverter
	} from '../../js_sdk/validator/yycw_car_service_order.js'
	const db = uniCloud.database();
	const dbCollectionName = 'yycw_car_service_order';
	const userInfo = uniCloud.getCurrentUserInfo()
	export default {
		data() {
			let formData = {
				"customer_needs": "",
				"customer_phone": "",
				"offer_price": 0,
				"price": 0,
				"payment_price": 0,
				"butler_id": '',
				"service_photos": [],
				"status": 2,
				"payment_status": 0,
				"customer_location": {},
				"store_id": {}
			}
			return {
				formData,
				orderSn: '',
				username: '',
				serviceFee: 0,
				serviceName: '',
				storeName: '',
				butlerName: '',
				supervisorName: '',
				servicePhotosTitle: '服务照片',
				isOff: false,
				offRate: 0,
				isCommon: true,
				showInputBorder: true,
				inputStyles: {
					color: '#000000',
					disableColor: '#ffffff'
				},
				imageStyles: {
					width: 72,
					height: 72,
					border: {
						color: "#ff5a5f",
						width: 2,
						style: 'none',
						radius: '2px'
					}
				},
				options: {
					// 将scheme enum 属性静态数据中的value转成text
					...enumConverter
				},
				whiteList: ['jpg', 'png', 'webp', 'jpeg', 'bmp', 'heic', 'heif']
			}
		},
		onLoad(e) {
			if (!e.id) {
				uni.showToast({
					icon: 'none',
					title: '请先选择服务订单'
				})
				setTimeout(() => uni.reLaunch({
					path: '/pages/index/index'
				}), 500)
				return
			}
			if (userInfo['role'] || [].length > 0) {
				this.isCommon = false
				this.servicePhotosTitle = ''
			}
			const id = e.id
			this.formDataId = id
			this.getDetail(id)
		},
		onShareAppMessage() {
			return {
				title: '服务工单:' + this.orderSn || this.serviceName || '',
				path: '/pages/yycw_car_service_order/detail?id=' + this.formDataId
			}
		},
		methods: {
			openNavigation(latitude, longitude) {
				if (latitude && longitude) {
					uni.openLocation({
						latitude: latitude,
						longitude: longitude
					})
				} else {
					uni.showToast({
						title: '缺少位置信息'
					})
				}
			},
			/**
			 * 获取表单数据
			 * @param {Object} id
			 */
			async getDetail(id) {
				uni.showLoading({
					mask: true
				})
				const detailRes = await db.collection(dbCollectionName)
					.where({
						_id: id
					})
					.field(`
					type_id,
					order_sn,
					customer_needs,
					customer_phone,
					customer_location,
					store_id,
					user_id,
					price,
					payment_price,
					butler_id,
					supervisor_id,
					service_photos,
					status
					`) // 精准字段控制
					.getTemp()
				const userRes = await db.collection('uni-id-users')
					.field(`_id,nickname`)
					.getTemp()
				const typeRes = await db.collection('yycw_car_service_type')
					.field(`_id,service_name`)
					.getTemp()
				const storeRes = await db.collection('yycw_store')
					.field(`_id,store_name,location`)
					.getTemp()
				db.collection(detailRes, userRes, storeRes, typeRes)
					.get().then((res) => {
						const data = res.result.data[0]
						if (data) {
							this.formData = data
							this.serviceName = data.type_id[0]?.service_name
							this.storeName = data.store_id[0]?.store_name
							this.butlerName = data.butler_id[0]?.nickname
							this.supervisorName = data.supervisor_id[0]?.nickname
							if (data.price && data.offer_price && data.price < data.offer_price) {
								this.isOff = true
								this.offRate = (1 - data.price / data.offer_price) * 100
							}
							if (this.formData.payment_price - this.formData.price > 1) {
								this.serviceFee = this.formData.payment_price - this.formData.price
							}
							this.orderSn = data.order_sn
							this.username = data.user_id[0]?.nickname||'未设置'
						}
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(() => {
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style lang="scss">
	/* .uni-container {
		padding: 15px;
	} */
	.uni-forms-item {
		padding: 0 15rpx !important;
	}

	.forms-row {
		margin: 0 15rpx;
		margin-bottom: 20rpx;
	}

	.forms-col {
		margin-right: 15rpx;
	}
	.uni-easyinput__content-textarea {
		font-size: 16rpx;
		min-height: 98rpx !important;
	}
	.is-disabled {
		color: #1e1e1e99 !important;
	}
	
	.uni-input-border,
	.uni-textarea-border {
		width: 100%;
		font-size: 14px;
		color: #666;
		border: 1px #e5e5e5 solid;
		border-radius: 5px;
		box-sizing: border-box;
	}
	
	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	
	}
	
	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.uni-button-group {
		margin-top: 50px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
	}

	.uni-button {
		width: 184px;
	}
</style>